<template>
  <div class="custom-subsection">
    <div
      class="subsection-item"
      v-for="(item, index) in reverseList"
      :key="index"
    >
      <div class="left">
        <div class="icon" :class="{ on: list.length - 1 - current == index }" />
        <div class="line" v-if="index !== list.length - 1" />
      </div>
      <div class="right">
        <div class="title">{{ item.title }}</div>
        <div class="content-warp">
          <div
            class="content-item"
            v-for="(c_item, c_index) in item.contents"
            :key="c_index"
          >
            <span class="text"
              ><u-parse
                :tag-style="{
                  div: 'color: #666',
                  p: 'color: #666',
                  span: 'color: #666',
                }"
                :html="c_item.text"
              ></u-parse
            ></span>
            <div class="images" v-if="c_item.images && c_item.images.length">
              <u-image
                style="display: inline-block; margin-right: 10rpx"
                v-for="(cc_item, cc_index) in c_item.images"
                :border-radius="25"
                :width="100"
                :height="100"
                :key="cc_index"
                :src="cc_item"
                @click="onLockImageItem(c_item.images, cc_index)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
type SubsectionList = Array<{
  title: string;
  contents: Array<{
    text: string;
    images?: string[];
  }>;
}>;
export default Vue.extend({
  props: {
    list: Array as () => SubsectionList,
    current: Number,
  },
  data: () => ({}),
  computed: {
    reverseList(): SubsectionList {
      const list = this.list;
      return list.reverse();
    },
  },
  methods: {
    // 查看图片
    onLockImageItem(list: string[], index: number) {
      uni.previewImage({
        current: list[index],
        urls: list,
      });
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
});
</script>

<style lang="scss">
/* 单项目样式 */
.subsection-item {
  display: flex;
  .left {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-top: 12rpx;
    margin-right: $uni-spacing-row-base;
  }
  .icon {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    width: 21rpx;
    height: 21rpx;
    background: #cccccc;
    &.on {
      background: #ffc100;
    }
  }
  .line {
    flex: 1;
    width: 1rpx;
    background: #cccccc;
    margin: 0 auto;
    margin-top: 10rpx;
  }
  .right {
    padding-bottom: 60rpx;
  }
  .title {
    margin-bottom: $uni-spacing-row-lg;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }
  .content-item {
    font-size: 26rpx;
    line-height: 45rpx;
    &:not(:last-child) {
      margin-bottom: 8rpx;
    }
    span {
      color: #666666;
    }
    .images {
      display: inline-block;
      vertical-align: text-top;
    }
  }
}
</style>
